<template>
  <div>
    <el-dialog
      :visible.sync="remarkVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      append-to-body
      width="500px"
    >
      <template slot="title">
        <div class="tishi">
          <span> 排序</span>
        </div>
      </template>
      <div>
        <vuedraggable class="wrapper" v-model="tableData">
          <transition-group>
            <div
              v-for="(item, index) in tableData"
              :key="index"
              class="item_he"
            >
              <p>
                <span><i class="el-icon-menu"></i></span>{{ item.chapter_name }}
              </p>
            </div>
          </transition-group>
        </vuedraggable>
      </div>
      <div class="foot-btn">
        <div class="form-group">
          <el-button
            type="primary"
            class="btn btn-success btn-block"
            @click="onConfirm"
          >
            确定
          </el-button>
        </div>
        <div class="form-group">
          <el-button
            class="btn btn-success btn-block close-btn"
            @click="cancel"
          >
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  components: { vuedraggable },
  props: {},
  data() {
    return {
      remarkVisible: false,
      tableData: [],
      sortList: []
    }
  },
  updated() {
    this.sortList = []
    this.tableData.map((item, index) => {
      this.sortList.push({ id: item.id, sort: index   })
    })
  },
  methods: {
    // 父组件触发的方法
    showModal(fromData) {
      this.tableData = fromData.tableData
      this.remarkVisible = true
    },
    // 点击确认
    async onConfirm() {
      if (this.sortList.length > 1) {
        try {
          let res = await this.request({
            url: '/admin/resourceAudioChapterManage/sortChange',
            method: 'post',
            loading: true,
            data: {
              content: JSON.stringify(this.sortList)
            }
          })
          if (res) {
            this.$message.success(res.msg)
            this.remarkVisible = false
            let that = this
            setTimeout(() => {
              that.$emit('ongetList')
            }, 1000)
          }
        } catch (err) {
          this.errorHandler(err)
        }
      }
    },
    // 点击取消
    cancel() {
      this.remarkVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.close-btn {
  background: #f2f2f2;
  border-radius: 5px;
  color: #666666;
}
.item_he {
  cursor: pointer;
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  text-align: left;
  color: #000000;
  span {
    margin-right: 5px;
  }
}
</style>
